<template>
    <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.groupName' prop='groupName'>
                    <el-input v-model.trim='formInline.groupName' clearable :placeholder='prompt?.groupName' />
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";

const props = defineProps({
    formInline: {
        type: Object,
        default: () => ({})
    },
    isLoading: {
        type: Boolean,
        default: false
    }
})
const ruleFormRef = ref();
const titles = {
    groupName: '分组名称'
}
const prompt = {
    groupName: `请输入${titles.groupName}`
}
const formRules = reactive(<FormRules>{
    groupName: [
        { required: true, message: prompt.groupName, trigger: 'blur' }
    ]
})
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>